import styles from './index.scss'
import ReactSVG from 'react-svg'
import { Button } from 'antd-mobile'
// import Load from '../Upload'
// 加载效果调用 loadData 参数
 // <Load {...loadData}></Load>

export default ({processTitle, submit}) => {
  const next = () => {
    submit()
  }
  return (
    <div className={styles.passportContainer}>
      <div className={styles.titleSize}>{processTitle}</div>
      <div className={styles.idUploadContainer}>
        <div className={styles.uploadFace}>
          <div className={styles.cameraView}></div>
          <div className={styles.idTitle}>身份证正面照</div>
        </div>
        <div className={styles.uploadBack}>
          <div className={styles.cameraView}></div>
          <div className={styles.idTitle}>
            身份证反面照
          </div>
        </div>
      </div>
      <div className={styles.photoTip}>
        <div className={styles.photoTipTitle}>
          拍照提示
        </div>
        <div className={styles.tipImageContainer}>
          <div  className={styles.tip}>
            <div className={styles.tipImage + ' ' + styles.right}></div>
            <div>
              <ReactSVG svgClassName={styles.svgSize} src='svg/upload/correct.svg'></ReactSVG>
            </div>
            <div className={styles.example}>
              正确示例
            </div>
          </div>
          <div  className={styles.tip}>
            <div className={styles.tipImage + ' ' + styles.defect}></div>
            <div>
              <ReactSVG svgClassName={styles.svgSize} src='svg/upload/error.svg'></ReactSVG>
            </div>
            <div className={styles.example}>
              边框缺失
            </div>
          </div>
          <div  className={styles.tip}>
            <div className={styles.tipImage + ' ' + styles.vague}></div>
            <div>
              <ReactSVG svgClassName={styles.svgSize} src='svg/upload/error.svg'></ReactSVG>
            </div>
            <div className={styles.example}>
              照片模糊
            </div>
          </div>
          <div  className={styles.tip}>
            <div className={styles.tipImage + ' ' + styles.light}></div>
            <div>
              <ReactSVG svgClassName={styles.svgSize} src='svg/upload/error.svg'></ReactSVG>
            </div>
            <div className={styles.example}>
              闪光强烈
            </div>
          </div>
        </div>
        <div className={styles.tipInfo}>
          <p>1.拍照时请将证件平放,手机横向拍摄</p>
          <p>2.确保身份证<span style={{color: '#F5A623'}}>边框完整、文字清晰可见</span></p>
          <p>3.照片上传后,若不满意可点击照片重新拍摄</p>
        </div>
        <div className={styles.next}>
          <Button type='primary' onClick={next}>下一步</Button>
        </div>
      </div>
    </div>
  )
}